<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/my-custom-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.1.0.css" />
<!-- <link rel="stylesheet" href="css/jqm-docs.css">
<link id="skin" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/switchskin.js"></script> -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jfeed.js"></script>
<script src="js/jquery.zrssfeed.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/jqm-docs.js"></script>
<!-- <script src="http://192.168.168.180:8081/target/target-script.js"></script> -->
<script type="text/javascript" src="js/cordova-1.8.0.js"></script>
<script type="text/javascript" src="js/storage.js"></script>
<script type="text/javascript" src="js/updatelist.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegapPlugin.js"></script>
<style type="text/css">
div .menu {
	display: none;
}
</style>
<script type="text/javascript">
	function updateListRss() {
		closeMenu();
		if (checkConnection()) {
			updateList();
		} else {
			showAlert('网络连接失败，请查看网络连接');
		}
	}
	$(document).delegate("#index", "pageinit", function() {
		/*  绑定订阅信息的单击事件 */
		$("#RssListView").delegate("#rssNewsA", "click", function() {
			var attr = $(this).attr("my-data");
			if (checkConnection()) {
				window.plugins.PGLoadingDialog.show();
				MyChangePage("#newsListPage", {
					"sel" : attr,
				});
			} else {
				//alert("网络连接失败，请查看网络连接");
				showAlert('网络连接失败，请查看网络连接');
			}
		});
		/*绑定删除订阅按钮的事件  */
		$("#RssListView").delegate("#deleteRssNews", "click", function() {
			var attr = $(this).attr("my-id");
			MyChangePage("#deleteRssPage", {
				"sel" : attr,
			});
		});
	});

</script>
</head>
<body onload="init();" onclick="closeMenu();">
	<!--  第一个页面，显示订阅列表信息，也是默认的主页面-->
	<div id="index" data-role="page" data-theme="a" class="jqm-page">
		<div data-role="header">
			<a id="update" onclick="updateListRss()" class='ui-btn-left' data-icon="refresh" data-transition="none">更新</a>
			<h1>订阅列表</h1>
			<a href="addRssNews.html" data-icon="plus" data-transition="none" data-role="button">添加</a>
		</div>
		<p id="tipsContent" align="center" hidden="true"></p>
		<div data-role="content" id="mainContent" align="center" hidden="true">
			<ol id="RssListView" data-inset="true" data-split-icon="delete" data-split-theme="d" data-filter="true" data-role="listview" data-filter-placeholder="搜索订阅.......">
			</ol>
		</div>
		<div data-role="footer" data-position="fixed" class="menu">
			<div data-role="navbar" data-iconpos="top">
				<ul>
					<li><a href="#settingPage" data-transition="none" data-icon="gear">设置</a></li>
					<li><a href="about.html" data-transition="none" data-icon="info">关于</a></li>
					<li><a onclick="exitApp();" data-transition="none" data-icon="delete">退出</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 显示新闻列表页面，点击订阅RSS，显示信息列表 -->
	<div data-role="page" id="newsListPage" class="jqm-page" data-theme="a">
		<script type="text/javascript">
			var name;
			var link;
			/* 回调函数，获取前一个页面传的值 */
			$("#newsListPage").bind("callback", function(e, args) {
				var str = args.sel.split("#");
				name = str[0];
				link = str[1];
				var limitNumber = window.localStorage.getItem("limitNumber");
				if (limitNumber == null) {
					limitNumber=20;
				}
				$("#newsListPageTitle").text(name);
				//parseFeed(link);
				$('#errorMsg').rssfeed(link, {
					limit : limitNumber
				});
			});

			/* 绑定单击新闻事件 */
			$(document).delegate("#newsListPage", "pageinit", function() {
				$("#newsListPageListView").delegate("a", "click", function() {
					var attr = $(this).attr("my-data");
					MyChangePage("#detailNewsPage", {
						"sel" : attr,
					});
				});
			});
		</script>
		<div data-role="header">
			<h1 id="newsListPageTitle"></h1>
			<a data-rel="back" data-role="button" class='ui-btn-right' data-icon="back" data-transition="none">返回</a>
		</div>
		<div data-role="content" align="center" id="newsListPageContent" hidden="ture">
			<ul id="newsListPageListView" data-inset="true" data-filter="true" data-role="listview" data-filter-placeholder="搜索新闻..... ">
			</ul>
		</div>
		<div id="errorMsg"></div>
	</div>

	<!--新闻信息展示页面，显示具体的一个新闻页面  -->
	<div id="detailNewsPage" data-role="page" class="jqm-page" data-theme='a'>
		<script type="text/javascript">
			var title;
			var link;
			var update;
			var description;
			/*获得从前一个页面传过来的值  */
			$("#detailNewsPage").bind("callback", function(e, args) {
				var str = args.sel.split("#");
				title = str[0];
				link = str[1];
				update = str[2].split("+")[0];
				description = str[3];
				$("#detailNewsTitle").text(title);
				$("#newsLink").attr("href", link);
				$("#newsUpdate").text("更新日期：" + update);
				$("#newsContent").text(description)
			});
		</script>
		<div data-role="header">
			<a id="newsLink" data-role="button" rel="external" class='ui-btn-right' data-icon="star">详细新闻</a>
			<h1>新闻摘要</h1>
			<a data-role="button" class='ui-btn-left' data-rel="back" data-icon="back">返回</a>
		</div>
		<div data-role="content">
			<div>
				<span id="detailNewsTitle"></span>
			</div>
			<hr>
			<div>
				<span id="newsUpdate" style="float: left; font-size: xx-small;"></span><br>
			</div>
			<hr>
			<p>
				<span id="newsContent" style="font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px; text-align: left;"></span>
			<p>
		</div>
	</div>

	<!--删除信息 提示对话框  -->
	<div data-role="dialog" id="deleteRssPage" class="jqm-page" data-theme="a">
		<script type="text/javascript">
			var id;
			$("#deleteRssPage").bind("callback", function(e, args) {
				id = args.sel;
			});
			/*删除订阅信息函数  */
			function deleteRssNews() {
				deleteRss(id, function() {
					$.mobile.changePage("index.html", {
						reverse : true,
						transition : "none"
					});
				});
			}
		</script>
		<div data-role="header">
			<h1>信息提示！</h1>
		</div>
		<div data-role="content" align="center">
			<h4>你确定要删除这条订阅信息吗？</h4>
			<a onclick="deleteRssNews()" data-role="button" data-inline="true" data-icon="delete">删除</a> <a data-role="button" data-inline="true" data-rel="back" data-transition="none" data-icon="back">取消</a>
		</div>
	</div>

	<!--设置页面 -->
	<div data-role="page" id="settingPage" data-theme="a" class="jqm-page">
		<script type="text/javascript">
			$("#settingPage").bind("pageshow", function() {
				$('[ name="radio-choice"]').change(function() {
					var radio_val = $('[ name="radio-choice"]:checked').val();
					window.localStorage.setItem("limitNumber", radio_val);
				});
			});
		</script>
		<div data-role="header">
			<a href="index.html" class='ui-btn-right' data-icon="home" data-transition="none">主页</a>
			<h1>设置</h1>
		</div>
		<div data-role="content">
			<div data-role="collapsible-set">
				<div data-role="collapsible" data-collapsed="true">
					<h3>更换皮肤</h3>
					<ul data-role="listview" data-inset="true" id="themeList">
						<li><a href="#" theme="a">Theme a</a></li>
						<li><a href="#" theme="b">Theme b</a></li>
						<li><a href="#" theme="c">Theme c</a></li>
						<li><a href="#" theme="d">Theme d</a></li>
						<li><a href="#" theme="e">Theme e</a></li>
						<li><a href="#" theme="f">Theme f</a></li>
						<li><a href="#" theme="g">Theme g</a></li>
					</ul>
				</div>

				<div data-role="collapsible" data-collapsed="true">
					<h3>新闻显示条数</h3>
					<div data-role="fieldcontain">
						<fieldset data-role="controlgroup" data-type="vertical">
							<legend></legend>
							<input id="radio_1" type="radio" name="radio-choice" value="5" /><label for="radio_1">5 条新闻</label> 
							<input id="radio_2" type="radio" name="radio-choice" value="10" /><label for="radio_2">10 条新闻</label>
							<input id="radio_3" type="radio" name="radio-choice" value="20" checked="checked" /><label for="radio_3">20 条新闻</label> 
							<input id="radio_4" type="radio" name="radio-choice" value="30" /><label for="radio_4">30 条新闻</label> 
							<input id="radio_5" type="radio" name="radio-choice" value="50" /><label for="radio_5">50 条新闻</label>
						</fieldset>
					</div>
				</div>

				<div data-role="collapsible" data-collapsed="true">
					<h3>设置更新</h3>
					<div data-role="fieldcontain">
						<fieldset data-role="controlgroup" data-type="horizontal">
							<legend></legend>
							<input id="handUpdate" type="radio" name="rdo_tw17" value="自动更新" data-theme="a" /><label for="handUpdate">自动更新</label> <input id="autoUpdate" type="radio" name="rdo_tw17" value="手动更新"
								data-theme="c" checked="checked" /><label for="autoUpdate">手动更新</label>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/changeSkin.js"></script>
</body>
</html>
